/*
 * @Author: your name
 * @Date: 2021-02-24 17:26:17
 * @LastEditTime: 2021-02-25 14:18:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\utils\help.js
 */
class faqMethod {
    constructor() {
        // 获取id名称
        const id = this.getUrlParam('id');
        // 获取下标
        this.indexlz = this.getUrlParam('indexlz');
        if (id && this.indexlz >= 0) {
            // 获取左边分类盒子
            this._domEle = document.getElementById(id);
            // 获取右边分类盒子
            this._domArticle = document.getElementsByClassName(id)[0];
            
        } else {
            this.indexlz = -1;
            this._domEle = document.getElementById('Ordering');
            // 获取右边分类盒子
            this._domArticle = document.getElementsByClassName('Ordering')[0];
        }
        // 获取文章分类下的所有子元素
        this.articleLi = this._domArticle.querySelectorAll('.faq-right-content');
        // 获取所有类名为.faq-right-title的dom
        this.faqRightTitle = this._domArticle.querySelectorAll('.faq-right-title');
        // 获取上下图标
        if(this.indexlz >= 0) this.icon = this.faqRightTitle[parseInt(this.indexlz)].querySelector('.iconfont');
        // 初始化计时器
        this.timer = null;
        // 焦点
        this.active = '';
        this._init();
    }
    _init() {
        let self = this;
        // 初始化top值
        let topNum = 0;
        // 遍历li获取指定li，改变其样式，并获取top值
        this._domEle.classList.add('liActive'); // b
        this._domArticle.classList.add('block');
        if(this.indexlz >= 0) {
            // 添加选中的指定样式
            this.faqRightTitle[parseInt(this.indexlz)].classList.add('liActive');
            // 显示选中的文章及子元素
            this.articleLi[parseInt(this.indexlz)].classList.add('articleActive');
            this.icon.classList.remove('icon-toBottom-fill');
            this.icon.classList.add('icon-toTop-fill');
        }
        this.timer = setInterval(function(){
            topNum += 10;
            self._scroll(topNum, 'faq');
        }, 20);
    }
    _scroll(num, ele, down=false) {
        let self = this;
        let isPause = false;
        let faq = document.getElementById(ele);
        let bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        if(faq){
            // 将窗口滚动到指定li的top位置
            this.active = faq.offsetTop;
            if(down) {
                if ((bodyScrollTop + 60) <= this.active) isPause = true;
            } else {
                if ((bodyScrollTop + 60) >= this.active) isPause = true;
            }
            if(isPause) {
                clearInterval(this.timer);
                this.timer = null;
                return;
            }
            // $(window).scrollTop(num);
            bodyScrollTop = num
        }
    }
    getUrlParam(paraName) {
        let url = document.location.toString();
        let arrObj = url.split("?");
        if (arrObj.length > 1) {
            let arrPara = arrObj[1].split("&");
            let arr;
            for (let i = 0; i < arrPara.length; i++) {
                arr = arrPara[i].split("=");
                if (arr != null && arr[0] == paraName) {
                    return arr[1];
                }
            }
            return "";
        }
        else {
            return "";
        }
    }
    initClick(id) {
        let ele = document.getElementById(id);
        let _domArticle = document.querySelector(`.${id}`);
        let articleLi = _domArticle.querySelectorAll('.faq-right-content');
        let faqLeftTitle = document.querySelectorAll('.title');
        let isNone = document.querySelectorAll('.none');
        let faqRightTitle = _domArticle.querySelectorAll(`.${id} .faq-right-title`);
        let self = this;
        let num = this.indexlz >= 0 ? this.indexlz : -1;
        let time = 0;
        // 给左边每个标题赋值点击事件
        ele.addEventListener('click', function (e) {
            let target = e.target;
            let topNum = document.documentElement.scrollTop || document.body.scrollTop;
            for(let i = 0; i < faqLeftTitle.length;i++) {
                faqLeftTitle[i].classList.remove('liActive'); //b
                isNone[i].classList.remove('block');
            }
            target.classList.add('liActive'); //b
            _domArticle.classList.add('block');
            if(faqRightTitle[num] && faqRightTitle[num].className.indexOf('liActive') > -1) {
                faqRightTitle[num].classList.remove('liActive');
                articleLi[num].classList.remove('articleActive');
            }
            if(this.indexlz) {
                faqRightTitle[parseInt(this.indexlz)].classList.remove('liActive');
                articleLi[parseInt(this.indexlz)].classList.remove('articleActive');
                this.indexlz = '';
            }
            self.timer = setInterval(function(){
                topNum -= 10;
                self._scroll(topNum, 'faq', true);
            }, 5);
        }, false);
        // 给右边每个标题赋值点击事件
        for (let i = 0; i < faqRightTitle.length; i++) {
            (function(i){
                faqRightTitle[i].addEventListener('click', function(e) {
                    let icon = '';
                    if(faqRightTitle[i].className.indexOf('liActive') > -1) {
                        icon = faqRightTitle[i].querySelector('.iconfont');
                        icon.classList.add('icon-toBottom-fill');
                        icon.classList.remove('icon-toTop-fill');
                        faqRightTitle[i].classList.remove('liActive');
                        articleLi[i].classList.remove('articleActive');
                        num = -1;
                    } else {
                        if(num >= 0) {
                            icon = faqRightTitle[num].querySelector('.iconfont');
                            faqRightTitle[num].classList.remove('liActive');
                            articleLi[num].classList.remove('articleActive');
                            icon.classList.remove('icon-toTop-fill');
                            icon.classList.add('icon-toBottom-fill');
                            time = 500;
                        }
                        icon = faqRightTitle[i].querySelector('.iconfont');
                        icon.classList.add('icon-toTop-fill');
                        icon.classList.remove('icon-toBottom-fill');
                        setTimeout(function(){
                            faqRightTitle[i].classList.add('liActive');
                            articleLi[i].classList.add('articleActive');
                        }, time)
                        num = i;
                    }
                })
            })(i)
        }
    }
}

export default faqMethod